<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于在打开和关闭状态之间进行切换。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-gap-30">
				<fu-switch v-model="switch1" @change="handleChange('switch1')"></fu-switch>
				<fu-switch v-model="switch2" @change="handleChange('switch2')"></fu-switch>
			</view>
		</fu-section>
		
		<fu-section title="加载中" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-gap-30">
				<fu-switch :loading="true"></fu-switch>
				<fu-switch :value="true" :loading="true"></fu-switch>
			</view>
		</fu-section>
		
		<fu-section title="禁用状态" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-gap-30">
				<fu-switch :disabled="true"></fu-switch>
				<fu-switch :value="true" :disabled="true"></fu-switch>
			</view>
		</fu-section>
		
		<fu-section title="自定义尺寸" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-switch v-model="switch3" size="30" @change="handleChange('switch3')"></fu-switch>
				
				<fu-switch v-model="switch4" size="25" @change="handleChange('switch4')"></fu-switch>
				
				<fu-switch v-model="switch5" size="20" @change="handleChange('switch5')"></fu-switch>
			</view>
		</fu-section>
		
		<fu-section title="自定义颜色" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-gap-30">
				<fu-switch v-model="switch6" activeColor="#01BEFF" @change="handleChange('switch6')"></fu-switch>
				<fu-switch v-model="switch7" activeColor="#FFA4A4" @change="handleChange('switch7')"></fu-switch>
			</view>
		</fu-section>
		
		<fu-section title="改变形状" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999" slot="desc">使用 shape 定义形状（circle 圆角 square 方形）</view>
			<view class="fu-flex fu-gap-30 fu-m-t-20">
				<fu-switch v-model="switch8" shape="circle" @change="handleChange('switch8')"></fu-switch>
				<fu-switch v-model="switch9" shape="square" @change="handleChange('switch9')"></fu-switch>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// data数据
	let switch1 = ref(false);
	let switch2 = ref(false);
	let switch3 = ref(false);
	let switch4 = ref(false);
	let switch5 = ref(false);
	let switch6 = ref(false);
	let switch7 = ref(false);
	let switch8 = ref(false);
	let switch9 = ref(false);
	
	// methods方法
	const handleChange = (state) => {
		switch(state) {
			case 'switch1':
				switch1.value = !switch1.value;
				break
			case 'switch2':
				switch2.value = !switch2.value;
				break
			case 'switch3':
				switch3.value = !switch3.value;
				break
			case 'switch4':
				switch4.value = !switch4.value;
				break
			case 'switch5':
				switch5.value = !switch5.value;
				break
			case 'switch6':
				switch6.value = !switch6.value;
				break
			case 'switch7':
				switch7.value = !switch7.value;
				break
			case 'switch8':
				switch8.value = !switch8.value;
				break
			case 'switch9':
				switch9.value = !switch9.value;
				break
			default:
				break
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>